<template>
  <div class="public-guid">
    <Tabs
      :tabList="tabsList"
      @selectTab="selectTab"
      :selectedIndx="selectedIndx"
    ></Tabs>
    <Brief :data="content"></Brief>
  </div>
</template>

<script>
import Tabs from '@/components/tabs'
import { tabsList } from '../config.js'
import { getContent } from '@/api/frontCommon'
import Brief from '../../components/brief.vue'

export default {
  components: {
    Tabs,
    Brief
  },
  data() {
    return {
      tabsList,
      selectedIndx: 0,
      content: {}
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const { data } = await getContent(6)
      this.content = data
    },
    async selectTab(val) {
      const { index, tab } = val
      const { data } = await getContent(tab.id)
      this.content = data
      this.selectedIndx = index
    },
  },
}
</script>